<template>
  <div id="me">
    <!-----头部----->
    <blogheader/>
    <couplet/>

    <el-row>
      <el-col :span="6">
        <div id="self_introduction" class="grid-content bg-purple" style="padding-bottom: 57px">
          <!--自我介绍-->
          <introduction/>
        </div>
      </el-col>
      <el-col :span="18">
        <div id="experience" class="grid-content bg-purple" style="background-color: rgba(0,0,0,.1)" >
            <myexperience />
        </div>
      </el-col>
    </el-row>



    <!-----底部-------->
    <blogfooter style="background-color: rgba(0,0,0,.2)"/>
  </div>
</template>

<script>
  import blogheader from '../components/blogheader'
  import blogfooter from '../components/blogfooter'
  import couplet from '../components/couplet'
  import introduction from '../components/introduction'
  import myexperience from  '../components/myexperience'

  export default {
    name: 'aboutMe',
    components: {
      blogheader,
      blogfooter,
      couplet,
      introduction,
      myexperience
    },

  }
</script>

<style scoped>
  #me {
    width: 100%;
    height: 100%;
    /*overflow: paged-x;*/
    /*background-color: #E0E0E0;*/
    /*background-color: red;*/
    overflow-x: hidden;
    background-image: url("../assets/msg_bg.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  #self_introduction{
      margin-left: 12%;
      background-color: darkgrey;
  }

  #experience{
      margin-right: 8%;
      margin-left: 2% ;
      min-height: 600px;
      box-shadow: 2px 0 5px #000000;
      /*padding-bottom: 30px;*/
  }





  .el-row {
    margin-bottom: 20px;
  }

  .el-row:last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
